import { Link } from '@aws-amplify/ui-react';
import { FlutterAuthenticatorExample } from '@/components/FlutterAuthenticatorExample';
import { Example, ExampleCode } from '@/components/Example';

## Full UI Customization

In addition to customizing form fields and theming, you can also build a custom UI for one or more of the <Link isExternal href="https://pub.dev/documentation/amplify_authenticator/latest/amplify_authenticator/AuthenticatorStep.html">authenticator steps</Link> using a combination of prebuilt widgets from the amplify_authenticator package, and widgets that you build yourself. This can be used for simple use cases, such as adding a logo to the sign in screen, as well as more complex use cases.

This is done by providing an `authenticatorBuilder` argument to the Authenticator. If you are familiar with widgets like <Link isExternal href="https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html">StreamBuilder</Link>, <Link isExternal href="https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html">FutureBuilder</Link>, or <Link isExternal href="https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html">LayoutBuilder</Link>, this may feel familiar. `authenticatorBuilder` is a builder method that takes arguments for the current `BuildContext` and <Link isExternal href="https://pub.dev/documentation/amplify_authenticator/latest/amplify_authenticator/AuthenticatorState-class.html">AuthenticatorState</Link>. AuthenticatorState is a representation of the state being managed by the authenticator. It contains all the form field data (username, email, etc.), methods to perform authentication actions (sign in, sign up, etc.), and methods to transition between steps.

Below is an example of how you can use `authenticatorBuilder` to add a logo to both the sign up and sign in screen, as well as change the layout to replace the tab bar with a footer button.

This example uses several prebuilt widgets from the amplify_authenticator package, such as `SignInForm()`, `SignUpForm()`, `SignInFormField.username()`, and `SignInButton()`. All of the prebuilt widgets are integrated into the authenticator's state, meaning that you do not have to add an `onChanged` callback for the Form Fields, or an `onTap` callback for the Buttons. You can find a full list of the prebuilt forms, form fields, and buttons in <Link isExternal href="https://pub.dev/documentation/amplify_authenticator/latest/amplify_authenticator/amplify_authenticator-library.html">the API docs</Link>.

<ExampleCode>
  ```dart file=../../../../../../flutter/authenticator/lib/examples/full_ui_customization.dart
  ```
</ExampleCode>
  
<FlutterAuthenticatorExample
  id="flutter-authenticator-full-ui-customization"
  useCustomUI={true}
/>